<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-30 17:28:07
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-10-08 11:58:24
 * @FilePath: \hy-ui\src\views\taskMassage\components\statistics\components\projectDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="taskDetail" :style="{height:isProject ? '75vh' : '85vh'}">
    <div
      style="
        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        cursor: pointer;
        background: #fff;
        padding: 12px 20px;
      "
    >
      <span @click="handleGoBack('1')">
          <i class="el-icon-back"></i>
          <span style="margin-left: 6px">返回统计</span>
        </span>
    </div>
    <div class="tableList" :style="{height:isProject ? '60vh' : '70vh'}">
      <el-table :data="tableData" style="width: 100%" size="default">
        <el-table-column
          prop="date"
          label="任务标题"
          min-width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="任务状态"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="逾期天数"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="所属项目"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="负责人"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="参与人"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="开始时间"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="结束时间"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="完成时间"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="项目标签"
          min-width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="address" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleTaskDetail(scope.row)"
              type="text"
              size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :page-sizes="[10, 20, 30, 50, 100]"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <taskDrawer
      ref="taskDrawer"
      v-if="visibleDrawer"
      :visible="visibleDrawer"
      :close="taskDrawerClose"
      :propsObj="taskObjProps"
      :isFile="true"
    />
  </div>
</template>

<script>
import taskDrawer from "@/views/taskMassage/components/task/components/taskDrawer.vue";
import { getTaskDetail } from "@/api/task/task.js";

export default {
  components: {
    taskDrawer,
  },
  props: {
    handleGoBack: {
      type: Function,
      default: () => {},
    },
     isProject: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibleDrawer: false,
      taskObjProps: {},
      queryParams: {
        pageSize: "10",
        pageNum: "1",
      },
      total: 100,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          taskId: "148",
        },
      ],
    };
  },
  methods: {
    async handleTaskDetail(row) {
      const res = await getTaskDetail(row.taskId);
      this.taskObjProps = {
        type: res.data.type === "1" ? "standard" : "flow",
        getList: this.getList,
        taskDetailData: res.data,
        checkData: false,
      };
      this.visibleDrawer = true;
    },
    taskDrawerClose() {
      this.visibleDrawer = false;
    },
    getList() {},
  },
};
</script>

<style lang="scss" scoped>
.taskDetail {
  height: 85vh;
  background: #f0f2f5;
  .tableList {
    background: #fff;
    margin: 20px 30px 12px 30px;
    padding: 10px;
    border-radius: 6px;
    height: 70vh;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
  }
  .pagination {
    height: 50px;
    background: #fff;
    margin: 0 30px;
    padding-right: 20px;
    border-radius: 6px;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
  }
}
</style>